<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				/*
					设置盒子标签边框性质
					颜色、实粗线、宽度
					可以分三行也可以实现一行完成 
					radius 分为边线圆角
				*/
				border-left-color: red;
				border-left-style: solid;
				border-left-width: 5px;		
						
				border-right: 10px solid red;
				border-bottom: solid 10px palevioletred;
				border-top: solid 10px palevioletred;
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;
			}
			#box2{
				width: 200px;
				height: 200px;
				border: 10px solid black;
				/*如果修改可在下面对具体位置信息进行修改*/
				border-bottom-color: red;
			}
			#box3{
				width: 150px;
				height: 150px;
				border: 10px solid black;
				/*>=50% 貌似⚪起来，<=50%是显示不怎么圆了*/
				border-radius: 50%;
				
			}
		</style>
	</head>
	<body>                             
		<div id="box1">
			盒子1
		</div>
		<div id="box2">
			盒子2
		</div>
		<div id="box3">
			</br></br>
			&nbsp;&nbsp;&nbsp;盒子3——</br>&nbsp;&nbsp;我要变成圆形
		</div>	
	</body>
</html>
